<template>
	<view class="page">
		<view class="form-container">
			<!-- 手机号输入 -->
			<view class="input-row">
				<text class="input-label">手机号</text>
				<input v-model="phone" class="input-field" type="number" placeholder="请输入手机号" maxlength="11"
					@input="handlePhoneInput" />
			</view>

			<!-- 验证码输入 -->
			<view class="input-row">
				<text class="input-label">验证码</text>
				<input v-model="code" class="input-field code-input" type="number" placeholder="请输入验证码" maxlength="6" />
				<button class="get-code-btn" :disabled="!canGetCode || isCounting" @click="getVerifyCode">
					{{ isCounting ? `${countdown}秒后重试` : '获取验证码' }}
				</button>
			</view>

			<!-- 绑定按钮 -->
			<button class="submit-btn" :disabled="!canSubmit" @click="handleSubmit">
				绑定手机号
			</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'

	const phone = ref('')
	const code = ref('')
	const countdown = ref(0)
	const isCounting = ref(false)

	// 验证手机号格式
	const validatePhone = (phone) => {
		return /^1[3-9]\d{9}$/.test(phone)
	}

	// 计算属性
	const canGetCode = computed(() => validatePhone(phone.value))
	const canSubmit = computed(() => validatePhone(phone.value) && code.value.length >= 4)

	// 手机号输入处理
	const handlePhoneInput = (e) => {
		phone.value = e.detail.value.replace(/\D/g, '')
	}

	// 获取验证码
	const getVerifyCode = () => {
		if (!validatePhone(phone.value)) return

		// 开始倒计时
		isCounting.value = true
		countdown.value = 60
		const timer = setInterval(() => {
			countdown.value--
			if (countdown.value <= 0) {
				clearInterval(timer)
				isCounting.value = false
			}
		}, 1000)

		// 实际项目中这里调用API发送验证码
		uni.showToast({
			title: '验证码已发送',
			icon: 'none'
		})
	}

	// 提交绑定
	const handleSubmit = () => {
		uni.showLoading({
			title: '绑定中...'
		})

		// 模拟API请求
		setTimeout(() => {
			uni.hideLoading()
			uni.showToast({
				title: '绑定成功',
				icon: 'success'
			})
		}, 1500)
	}
</script>

<style lang="scss">
	.page {
		padding: 32rpx;
		background-color: #f7f7f7;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.form-container {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
	}

	.input-row {
		display: flex;
		align-items: center;
		padding: 24rpx 0;
		border-bottom: 1rpx solid #eee;
		position: relative;

		&:last-child {
			border-bottom: none;
		}
	}

	.input-label {
		width: 140rpx;
		font-size: 32rpx;
		color: #333;
	}

	.input-field {
		flex: 1;
		font-size: 32rpx;
		height: 48rpx;
		padding: 0;
	}

	.code-input {
		width: 240rpx;
	}

	.get-code-btn {
		position: absolute;
		right: 0;
		background: none;
		border: none;
		color: #07C160;
		font-size: 28rpx;
		padding: 0;
		margin: 0;

		&::after {
			border: none;
		}

		&[disabled] {
			color: #999;
		}
	}

	.submit-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background-color: #07C160;
		color: white;
		border-radius: 8rpx;
		font-size: 32rpx;
		margin-top: 48rpx;

		&[disabled] {
			background-color: #a0e8c1;
		}
	}
</style>